import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import { getMemberInfo, getMemberOrder, getStudy } from '../../api/memberInfo'

import Info from './info'
import Order from './order'
import { ListLoading } from '../../components/loading'

import './index.less'

class MemberInfo extends Taro.Component {
  config = {
    navigationBarTitleText: '会员详情'
  }

  state = {
    current: 0,
    isOrderDone: false,
    info: {},
    order: [],
    study: []
  }

  async getMemberInfo() {
    const { memberId } = Taro.getCurrentPages().pop().options
    const res = await getMemberInfo({ memberId })

    this.setState({
      info: res.data
    })
  }

  async getMemberOrder() {
    const { memberId } = Taro.getCurrentPages().pop().options
    const res = await getMemberOrder({ memberId })

    this.setState({
      order: res.data,
      isOrderDone: true
    })
  }

  async getStudy() {
    const { memberId } = Taro.getCurrentPages().pop().options
    const res = await getStudy({ memberId })

    this.setState({
      study: res.data
    })
  }

  componentDidMount() {
    this.getMemberInfo()
  }

  handleClick = val => {
    this.setState({
      current: val
    })

    if (!this.state.isOrderDone && val === 1) {
      this.getMemberOrder()
    }

    if (!this.state.study.courseModel && val === 2) {
      this.getStudy()
    }
  }

  render() {
    // const tabList = [{ title: '基本信息' }, { title: '订单' }, { title: '学习' }, { title: '推荐' }, { title: '优惠券' }]
    const tabList = [{ title: '基本信息' }, { title: '订单' }, { title: '学习' }]
    const { current, isOrderDone, info, order, study } = this.state

    return (
      <View className="page">
        <AtTabs
          current={ current }
          tabList={ tabList }
          onClick={ this.handleClick }
        >
          <AtTabsPane current={ current } index={ 0 }>
            <Info info={ info } />
          </AtTabsPane>
          <AtTabsPane current={ current } index={ 1 }>
            <Order order={ order } />
          </AtTabsPane>
          <AtTabsPane current={ current } index={ 2 }>
            <View className="member-study-list">
              <View className="title">
                <Text>学员定级</Text>
                <Text>{ study.levelStr }</Text>
              </View>
              <View className="process box">
                {
                  study.courseModel.map((item, index) => (
                    <View className="item" key={ index }>
                      <View>{ item.key }</View>
                      <View>{ item.value ? item.value : '-' }</View>
                    </View>
                  ))
                }
              </View>
              <View className="result box">
                <View>
                  <Text>课程总数</Text>
                  <Text className="t1">{ study.recordModel.lessoncount }</Text>
                </View>
                <View>
                  <Text>累计时长（分钟）</Text>
                  <Text className="t2">{ study.recordModel.duration }</Text>
                </View>
                <View>
                  <Text>掌握单词</Text>
                  <Text className="t3">{ study.recordModel.wordscount }</Text>
                </View>
                <View>
                  <Text>获得金币</Text>
                  <Text className="t4">{ study.recordModel.coincount }</Text>
                </View>
                <View>
                  <Text>开口次数</Text>
                  <Text className="t5">{ study.recordModel.opencount }</Text>
                </View>
                <View>
                  <Text>测评总数</Text>
                  <Text className="t6">{ study.recordModel.testcount }</Text>
                </View>
              </View>
            </View>
          </AtTabsPane>
          <AtTabsPane current={ current } index={ 3 }>
            <View className="member-recommend-list">
              <View className="total">23条记录</View>
              <View className="item">
                <View className="left">
                  <Image src={ require('../../assets/images/head_pic.png') } />
                  <View className="info">
                    <View>
                      <Text className="name">啊第三</Text>
                      <Text className="tag pay">付费</Text>
                    </View>
                    <View>
                      <Text>17611369399</Text>
                      <Text style={{ marginLeft: '10Px' }}>2020-03-03</Text>
                    </View>
                  </View>
                </View>
                <Text className="integral">积分+1</Text>
              </View>
            </View>
          </AtTabsPane>
          <AtTabsPane current={ current } index={ 4 }>
            <View className="member-coupon-list">
              <View className="item">
                <View className="info">
                  <View className="money">
                    <Text>¥</Text>
                    <Text>10000</Text>
                  </View>
                  <View className="date">
                    <Text>拼团专享立减券</Text>
                    <Text>2020.04.16-2020.05.16</Text>
                  </View>
                </View>
                <View className="foot">
                  <Text>无门槛，购买希朗AI年课会员</Text>
                </View>
              </View>
              <View className="item">
                <View className="info disabled">
                  <View className="money">
                    <Text>¥</Text>
                    <Text>10000</Text>
                  </View>
                  <View className="date">
                    <Text>拼团专享立减券</Text>
                    <Text>2020.04.16-2020.05.16</Text>
                  </View>
                  <Image src={ require('../../assets/images/member_used_icon.png') } />
                </View>
                <View className="foot">
                  <Text>无门槛，购买希朗AI年课会员</Text>
                  <View>
                    <Text>拼团详情</Text>
                    <Image src={ require('../../assets/images/member_detail_icon.png') } />
                  </View>
                </View>
                <View className="detail">
                  <View className="title">已有5人拼团成功</View>
                  <View className="con">
                    <View className="head-list">
                      <Image src={ require('../../assets/images/head_pic.png') } />
                      <Image src={ require('../../assets/images/head_pic.png') } />
                      <Image src={ require('../../assets/images/head_pic.png') } />
                      <Image src={ require('../../assets/images/head_pic.png') } />
                    </View>
                    <View className="coupon">
                      <Image src={ require('../../assets/images/member_coupon_icon.png') } />
                      <Text>实付:￥1234</Text>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </AtTabsPane>
        </AtTabs>
        {
          current === 1
          ?
          <ListLoading isDone={ isOrderDone } data={ order } />
          :
          null
        }
      </View>
    )
  }
}

export default MemberInfo